<template>
	<div class="login-container">
		<div class="card">
			<div class="card-bg"><img :src="require('@/assets/com/image/card-bg.jpg')"></div>
			<div class="content">
				<div class="left">
					<img class="logo" title="logo":alt="translate('tips.imgLoadFail')"
						 :src="require('@/assets/com/image/logo.png')">

					<img class="card-img" :alt="translate('tips.imgLoadFail')"
						 :src="require('@/assets/com/image/card-img.png')">
				</div>
				<div class="right">
					<!--语言切换-->
					<div class="language">
						<i class="icon-global"></i>
						<popover-list placement="bottom-end" popper-class="nav-popper"
									  icon-after="el-icon-arrow-right"
									  :data="languagePopoverList"
									  v-model="languagePopover"
									  @click="languageChange">
						</popover-list>
					</div>

					<el-form ref="form" :model="form" :rules="rules" class="login-form"
							 label-posvalidCodeModeition="left">
						<!--密码登录-->
						<el-tabs class="tabs" v-model="tabs">
							<el-tab-pane :label="translate('label.loginByPWD')" name="loginByPWD">
								<template v-if="tabs==='loginByPWD'">
									<el-form-item prop="username">
										<el-input
												v-model.trim="form.username"
												:placeholder="translate('label.inputUserName')"
												tabindex="1"
												@keyup.enter.native="login"
												type="text">
											<template #prefix>
												<vab-icon icon="user-fill"/>
											</template>
										</el-input>
									</el-form-item>
									<el-form-item prop="password">
										<el-input
												v-model.trim="form.password"
												:placeholder="translate('label.inputPassword')"
												tabindex="2"
												@keyup.enter.native="login"
												:type="passwordType">
											<template #prefix>
												<vab-icon icon="lock-2-fill"/>
											</template>
											<template v-if="passwordType === 'password'" #suffix>
												<vab-icon class="show-password" icon="eye-close-line" @click="showPwd"/>
											</template>
											<template v-else #suffix>
												<vab-icon class="show-password" icon="eye-fill" @click="showPwd"/>
											</template>
										</el-input>
									</el-form-item>
									<!--<el-form-item prop="code">
										<el-input block
												  v-model.trim="form.code"
												  @keyup.enter.native="login"
												  :placeholder="translate('label.inputCode')"
												  tabindex="3">
											<template #prefix><vab-icon icon="drive-line"/></template>
											<template #suffix>
												<div class="code line-loading" v-loading="codeLoading" @click="getCode">
													<el-image fit="fill" :src="codeSrc"/>
												</div>
											</template>
										</el-input>
									</el-form-item>-->
								</template>
							</el-tab-pane>
							<!--短信登录-->
							<el-tab-pane :label="translate('label.loginBySMS')" name="loginBySMS">
								<template v-if="tabs==='loginBySMS'">
									<el-form-item prop="phone">
										<el-input
												v-model.trim="form.phone"
												:placeholder="translate('label.inputPhoneNum')"
												tabindex="1"
												@keyup.enter.native="login"
												@input="phoneChange"
												type="text">
											<template #prefix>
												<vab-icon icon="phone-fill"/>
											</template>
											<template #suffix>
												<div @click="sendSmsCode" class="send-sms line-loading"
													 :class="{'disabled':disableSend}" v-loading="sendBtnLoading">
													{{ sendText }}
												</div>
											</template>
										</el-input>
									</el-form-item>
									<el-form-item prop="smsCode">
										<el-input
												v-model.trim="form.smsCode"
												:placeholder="translate('label.inputSmsCode')"
												tabindex="2"
												@keyup.enter.native="login"
												type="text">
											<template #prefix>
												<vab-icon icon="message-3-fill"/>
											</template>
										</el-input>
									</el-form-item>
								</template>
							</el-tab-pane>
						</el-tabs>
						<!--忘记密码-->
						<el-form-item class="find-pwd">
							<router-link to="#">{{ translate('label.lossPassword') }}？</router-link>
						</el-form-item>
						<!--登录按钮-->
						<el-button class="login-btn" type="primary" size="max" @click.native.prevent="login"
								   tabindex="4"
								   :loading="btnLoading">
							{{ translate("label.login") }}
						</el-button>

						<!--其他登录方式-->
						<el-row class="login-other-way">
							<el-col :span="6">
								<i class="icon icon-wechat"></i>
								<p>{{ translate("label.loginWayWechat") }}</p>
							</el-col>
							<el-col :span="6">
								<i class="icon icon-qq"></i>
								<p>QQ</p>
							</el-col>
							<el-col :span="6">
								<i class="icon icon-dingding"></i>
								<p>{{ translate("label.loginWayDingDing") }}</p>
							</el-col>
							<el-col :span="6">
								<i class="icon icon-feishu"></i>
								<p>{{ translate("label.loginWayFeiShu") }}</p>
							</el-col>
						</el-row>
						<!--注册链接-->
						<p class="register">{{ translate('label.notAccount') }}
							<router-link to="/register">{{ translate('label.registerNow') }}</router-link>
						</p>
						<div class="swiper-row" :class="{'high-light':highLight}" v-if="showSwiper"
							 v-loading="swiperLoading">
							<p>{{ translate('label.swiperVerifyTitle') }}</p>
							<swiper-verify :data="swiperData" @refresh="refresh" @end="swiperEnd"/>
						</div>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import {Component} from "vue-property-decorator";
import BaseVue from '@/common/base-vue'

import {isPhone} from '@/utils/validate'

import ResponseModel from '@/common/model/response.model';
import LoginModel from './model/login.model';
import LoginResultModel from './model/login-result.model';
import LoginService from './login.service';
import {ElForm} from "element-ui/types/form";

import SwiperVerifyModel from "@/views/login/swiper-verify/model/swiper-verify.model";
import {
	SettingMutationEnum,
	SettingsGetterEnum,
	StoreDictEnum,
	UserGetterEnum
} from "@/store/enum/store.enum";
import {BASE64_PREFIX} from "@/common/const/common.const";

import popoverList from '@/layout/popover-list/popover-list'
import SwiperVerify from '@/views/login/swiper-verify/';
import PopoverListModel from "../../layout/popover-list/model/popover-list.model";
import SwiperOutputModel from "./swiper-verify/model/swiper-output.model";

@Component({components: {SwiperVerify, popoverList}})
export default class login extends BaseVue {

	/*切换语言弹窗*/
	private languagePopoverList: PopoverListModel[];
	private languagePopover: PopoverListModel = new PopoverListModel();
	private language='';

	/*默认标签页*/
	private tabs = 'loginByPWD';
	/*登录表单模型*/
	private form: LoginModel = new LoginModel();
	/*生成验证的时间戳*/
	private stamp = '';
	/*用于控制是否显示密码*/
	private passwordType = 'password';
	/*验证码src*/
	private codeSrc = "";
	/*验证码loading*/
	private codeLoading = false;
	/*按钮点击loading*/
	private btnLoading = false;
	private sendText = '';
	/*禁用发送验证码按钮*/
	private disableSend = true;
	private sendBtnLoading = false;
	/*短信计时*/
	private timeOut: NodeJS.Timeout;
	private $refs: {
		form: ElForm
	}
	/*滑动验证loading*/
	private swiperLoading = true;
	/*显示滑动验证*/
	private showSwiper = false;
	/*滑动验证是否通过，（默认不需要验证，输错过账号密码才需要验证）*/
	private swiperPass = true;
	/*验证错误高亮*/
	private highLight = false;
	/*滑动验证*/
	private swiperData: SwiperVerifyModel = new SwiperVerifyModel();

	/*账号密码输入框的验证规则*/
	private rules:{
		username:Object,
		password:Object,
		// code:Object,
		phone:Object,
		smsCode:Object,
	};

	/**
	 * 生命周期created
	 */
	private created() {
		this.setRules();
		//国际化文本
		this.sendText = this.translate('label.sendSms');

		this.language=this.$store.getters[SettingsGetterEnum.language];
		/*语言列表*/
		this.languagePopoverList = [
			{label: '简体中文', key: 'zh-CN', value: 'zh-CN'},
			{label: '繁体中文', key: 'zh-TW', value: 'zh-TW'},
			{label: 'English', key: 'en-US', value: 'en-US'}
		]
		this.languagePopover = this.languagePopoverList.find(item=>item.value===this.language);
	};

	/**
	 * 生命周期mounted
	 */
	private mounted() {
		// this.getCode();
	}

	/**
	 * 设置验证规则方法
	 */
	private setRules() {
		this.rules = {
			username: [{required: true, message: this.translate('label.inputUserName'), trigger: 'change'}],
			password: [{required: true, message: this.translate('label.inputPassword'), trigger: 'change'}],
			// code: [{required: true, message:this.translate('label.inputCode'), trigger: 'change'}],
			phone: [{required: true, message: this.translate('label.inputPhoneNum'), trigger: 'change'},
				{validator: isPhone, message: this.translate('validate.isPhone'), trigger: 'blur'}
			],
			smsCode: [{required: true, message: this.translate('label.inputSmsCode'), trigger: 'change'}]
		};
	}

	/**
	 * 监控手机号输入
	 */
	private phoneChange(val:string) {
		this.disableSend = !(/^1\d{10}$/).test(val);
	}

	/**
	 * 发送短信验证码
	 */
	sendSmsCode() {
		this.$refs.form.validateField('phone', (valid) => {
			if (!valid && !this.disableSend) {
				this.disableSend = true;
				this.sendBtnLoading = true;
				LoginService.sendSms().then(res => {
					if (res.status === 200) {
						this.$message.success(this.translate('label.sendSmsSuccess'))
						let time = 60;
						this.sendText = this.translate('label.resendSms') + time + "S";
						this.timeOut = setInterval(() => {
							time--;
							if (time == 0) {
								clearInterval(this.timeOut);
								this.sendText = this.translate('label.resendSms');
								this.disableSend = false;
								return
							}
							this.sendText = this.translate('label.resendSms') + time + "S";
						}, 1000);
					}
				}).catch(err => {
					this.disableSend = false;
				}).finally(() => {
					this.sendBtnLoading = false;
				})
			}
		})
	};

	/**
	 * 登录方法
	 */
	private login() {
		this.highLight = false;
		this.showSwiper = false;
		this.$refs.form.validate((valid: boolean) => {
			if (valid) {
				// 如果没有进行过滑动验证，则高亮提示
				if (!this.swiperPass && this.showSwiper) {
					this.highLight = true;
				}
				//如果没有进行滑动验证，则弹出滑动验证框
				if (!this.swiperPass) {
					this.showSwiper = true;
					this.getSwiperCode();
					return
				}
				this.btnLoading = true;
				LoginService.login(this.form).then((res: ResponseModel<LoginResultModel>) => {
					if (res.status === 200) {
						//提交用户信息到store
						this.$store.commit(UserGetterEnum.userInfo, res.data);
						//获取数据字典
						// this.$store.dispatch(StoreDictEnum.dict);
						//获取文件路径前缀
						this.$store.dispatch(StoreDictEnum.urlPrefix);

						this.$router.push({path: '/'});
					} else {
						this.btnLoading = false;
						this.swiperPass = false;
						// this.getCode();
					}
				}).catch(err => {
					this.btnLoading = false;
				})
			}
		})
	};

	/**
	 * 获取图片验证码
 	 */
	private getCode() {
		this.stamp = new Date().getTime().toString();
		this.form.stamp = this.stamp;//保持登录参数的t与生成验证码的一致
		this.codeLoading = true;
		LoginService.getCode({stamp: this.stamp, responseType: 'base64'}).then((res: ResponseModel) => {
			if (res.status === 200 && res.data) {
				this.codeSrc = BASE64_PREFIX + res.data;
			}
		}).catch(err => {
			this.codeSrc = "";
		}).finally(() => {
			this.codeLoading = false;
		})
	};

	/**
	 * 获取滑动验证码
	 */
	private getSwiperCode() {
		this.stamp = new Date().getTime().toString();
		this.swiperLoading = true;
		LoginService.getSwiperCode({stamp: this.stamp}).then((res: ResponseModel<SwiperVerifyModel>) => {
			this.swiperLoading = false;
			if (res.status === 200 && res.data) {
				res.data.image = BASE64_PREFIX + res.data.image;
				res.data.swiperImage = BASE64_PREFIX + res.data.swiperImage;
				this.swiperData = res.data;
			}
		})
	};

	/**
	 * 滑动放开立即进行校验，校验通过立即提交登录的账号密码
	 */
	private swiperEnd(val:SwiperOutputModel) {
		this.swiperLoading = true;
		LoginService.checkSwiperCode({end: val.end, stamp: this.stamp}).then((res: ResponseModel<boolean>) => {
			if (res.status === 200 && res.data) {
				this.swiperPass = true;
				// 验证成功直接登录
				this.login();
			} else {
				// 验证失败重新获取
				this.getSwiperCode();
			}
		}).finally(() => {
			this.swiperLoading = true;
		})
	}

	/**
	 * 刷新滑动的验证码
	 */
	private refresh() {
		this.getSwiperCode()
	}

	/**
	 * 显示密码
	 */
	private showPwd() {
		this.passwordType === 'password' ? (this.passwordType = '') : (this.passwordType = 'password')
	};

	/**
	 * 切换语言
	 */
	private languageChange(val:PopoverListModel) {
		this.$i18n.locale = val.value;
		this.$store.commit(SettingMutationEnum.changeLanguage, val.value);
		this.setRules();
	};
}
</script>

<style lang="scss" scoped>
.login-container {
	height: 100%;
	overflow-x: hidden;
	background: url("~@/assets/com/image/background.jpg") no-repeat center;
	background-size: cover;

	.card {
		width: 85%;
		max-width: 1500px;
		background: #fff;
		overflow: hidden;
		border-radius: 20px;
		box-shadow: 0 10px 30px 0 #95A2E2;
		margin: auto;
		position: relative;
		top: 50%;
		transform: translateY(-50%);

		.card-bg {
			img {
				width: 100%;
				height: auto;
				display: block;
				margin: 0
			}
		}
	}

	.content {
		position: absolute;
		z-index: 3;
		width: 100%;
		height: 100%;
		overflow: auto;
		top: 0;
		left: 0;
		display: flex;
		flex-wrap: nowrap;

		.left {
			width: 55.33%;
			flex: 1;
			padding: 3% 0 0 4%;
			overflow: hidden;

			.logo {
				display: block;
				margin: 0;
				width: 30%;
				max-width: 225px;
				height: auto
			}

			.card-img {
				width: 95%;
				height: auto;
				display: block;
				margin: 3% 0;
				float: right
			}
		}

		.right {
			width: 44.66%;
			position: relative;
			padding: 3% 3.5%;
			overflow: hidden;

			.language {
				display: flex;
				float: right;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;
				position: relative;

				span ::v-deep.popover-item, ::v-deep.popover-item .icon {
					color: $base-font-color-seat;
				}

				.icon-global {
					display: inline-block;
					margin: 0 8px;
					position: relative;
					top: 2px;
					width: 24px;
					height: 24px;
					background: url('~@/assets/com/icon/login-icon.png') no-repeat center -96px;
					background-size: 100% auto;
				}
			}

			.login-form {
				width: 85%;
				max-width: 400px;
				margin: 21.5% 11% 0 0;
				position: relative;
				float: right;
				clear: both;

				.tabs {
					::v-deep.el-tabs__header {
						text-align: center;
						margin: 0 auto 8% auto;

						.el-tabs__nav {
							width: 100%;
							text-align: center
						}

						.el-tabs__item {
							font-size: $base-font-size-max;
							padding: 0 35px;
							height: 47px;
							line-height: 45px;
							color: $base-color-orange;

							&:after {
								content: '';
								display: block;
								height: 2px;
							}
						}

						.el-tabs__item.is-active:after {
							background: $base-color-orange
						}

						.el-tabs__item:nth-child(2) {
							padding-left: 0;
						}

						.el-tabs__item:nth-child(3) {
							padding-right: 0;
						}

						.el-tabs__item:not(.is-active) {
							color: #979797
						}

						.el-tabs__nav-wrap::after, .el-tabs__active-bar {
							display: none
						}
					}

					.el-tab-pane {
						overflow: hidden
					}
				}

				.el-form-item {
					margin-bottom: 18px;
					margin: 6% 0;

					::v-deep.el-input {
						.el-input__prefix i, .el-input__suffix i {
							font-size: 24px;
							color: #e6e6e6;
							line-height: 48px
						}

						.el-input__inner {
							border: none;
							border-bottom: 1px solid #e6e6e6;
							padding-left: 50px;
							height: 54px;
							line-height: 54px;
							font-size: $base-font-size-big
						}

						.code {
							width: 140px;
							height: 100%;
							border: 1px solid #ddd;
							margin: 0 -5px 0 0;
							cursor: pointer;

							.el-image {
								width: 100%;
								height: 100%
							}
						}

						.send-sms {
							height: 100%;
							display: flex;
							align-items: center;
							cursor: pointer;
							color: $base-color-blue;
							font-size: $base-font-size-big;
							margin-top: -1px;

							&.disabled {
								color: inherit
							}
						}
					}
				}

				.find-pwd {
					text-align: right;

					a {
						color: #888;
						font-size: $base-font-size-big
					}

					::v-deep.el-form-item__content {
						line-height: 1;
					}
				}

				.login-btn {
					display: block;
					width: 100%;
					margin: 2% auto;
					background: $base-color-orange;
					border-radius: 180px;
					border: none;
					line-height: 60px;
					padding: 0;
					font-size: $base-font-size-bigger;
					letter-spacing: 5px;

					::v-deep.el-icon-loading {
						width: 18px;
						height: 18px;
						font-size: unset;
					}
				}

				.login-other-way {
					text-align: center;
					margin: 12% 0;

					.icon {
						display: inline-block;
						width: 40px;
						height: 40px;
						cursor: pointer;
						background: url("~@/assets/com/icon/login-icon.png") no-repeat;
						background-size: 100% auto;
					}

					.icon-wechat {
						background-position: center -40px
					}

					.icon-qq {
						background-position: center 0
					}

					.icon-dingding {
						background-position: center -80px
					}

					.icon-feishu {
						background-position: center -120px
					}

					p {
						margin: 5px;
						font-size: $base-font-size-big;
						color: #888
					}
				}

				.register {
					text-align: center;
					font-size: $base-font-size-big;
					color: #888
				}

				.el-form-item ::v-deep.el-form-item__error {
					font-size: $base-font-size-big;
				}
			}
		}
	}

	.swiper-row {
		position: absolute;
		top: 0;
		background: #fff;
		z-index: 2;
		width: calc(100% + 40px);
		min-height: 52%;
		height: auto\9\0;
		padding: 20px;
		margin: 0 -20px;
		box-shadow: 0 0 10px 0 $base-color-grayD;
		border-radius: 10px;
		transition: $base-transition;
		overflow: hidden;

		p {
			font-size: 13px;
			margin-top: 0;
			color: $base-font-color-routine
		}

		.swiper-verify {
		}

		&.high-light {
			box-shadow: 0 0 10px $base-color-red;
		}
	}

}

@media screen and (max-width: 1600px) {
	.login-container .content .right .login-form {
		margin: 15% 5% 0 0;
	}
	.login-container .content .right .login-form ::v-deep.tabs .el-tabs__header {
		margin-bottom: 5%
	}
	.login-container .content .right .login-form ::v-deep.tabs .el-form-item {
		margin: 5% auto
	}
	.login-container .content .right .login-form .login-other-way {
		margin: 8% auto
	}

	.login-container .content .swiper-row {
		padding: 15px;
		margin: 0;
		width: 100%
	}

}

@media screen and (max-width: 1440px) {
}

@media screen and (max-width: 1280px) {
	.login-container .content .right .login-form {
		margin: 10% 0 0 0;
	}
	.login-container .content .right .login-form .tabs ::v-deep.el-tabs__header .el-tabs__item {
		font-size: $base-font-size-bigger;
		padding: 0 20px;
	}
	.login-container .content .right .login-form .login-btn {
		line-height: 50px;
	}
	.login-container .content .right .login-form .login-other-way img {
		width: 42px;
		height: 42px
	}
	.login-container .content .right .login-form .login-other-way p,
	.login-container .content .right .login-form .register {
		font-size: $base-font-size-default
	}
	.login-container .content .right .login-form .el-form-item ::v-deep.el-form-item__error {
		font-size: $base-font-size-default
	}
}

@media screen and (max-width: 1080px) {
	.login-container .content .right .login-form {
		margin: 5% 0 0 0;
	}
	.login-container .content .right .login-form ::v-deep.tabs .el-form-item {
		margin: 20px auto
	}
	.login-container .content .right .login-form .el-form-item .el-input ::v-deep.el-input__inner {
		height: 42px;
		line-height: 42px;
	}
	.login-container .content .right .login-form .login-btn {
		line-height: 42px;
	}
	.login-container .content .right .login-form .login-other-way {

		.icon {
			width: 32px;
			height: 32px
		}

		.icon-wechat {
			background-position: center -32px
		}

		.icon-qq {
			background-position: center 0
		}

		.icon-dingding {
			background-position: center -64px
		}

		.icon-feishu {
			background-position: center -96px
		}
	}
}

@media screen and (max-width: 960px) {
	.login-container .card {
		width: 90%;
	}
	.login-container .card .card-bg {
		display: none
	}
	.login-container .content {
		position: relative
	}
	.login-container .content .left {
		display: none
	}
	.login-container .content .right {
		width: 100%
	}
	.login-container .content .right .login-form {
		width: 100%;
		max-width: 100%
	}
}
</style>
